<template>
    <div class="container share-page">
        <div class="inner-background">
            <!-- 头像与人名行 -->
            <div class="inner-box">
                <div class="avatar-name-row">
                    <img
                        class="avatar"
                        :src="avatarUrl"
                        :alt="username" />
                    <span class="username">{{ username }}</span>
                    <span class="share-text">给你分享了音乐</span>
                </div>
                <div class="img_picture">
                    <div class="raduis">
                        <img
                            class="picture"
                            :src="avatarUrl"
                            :alt="username" />
                    </div>
                </div>
                <div class="bottom-box">
                    <p class="price">
                        ￥<span>{{ price }}</span
                        >.{{ decimal[1] }}
                    </p>
                    <div class="btn_share">
                        <van-button
                            @click="checkDetail"
                            color="linear-gradient(to right, #ffc837, #f96016)"
                            size="large"
                            round>
                            查看详情
                        </van-button>
                        <van-notice-bar
                            style="width: 11.2 rem; font-size: 0.7rem"
                            left-icon="warning-o"
                            color="grey"
                            background="#fff"
                            mode="link">
                            这不是显卡是减肥的快速反击
                        </van-notice-bar>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { Notify } from 'vant';
export default {
    props: {
        // avatarUrl: {
        //     type: String,
        //     required: true,
        // },
        // username: {
        //     type: String,
        //     required: true,
        // },
    },
    data() {
        return {
            avatarUrl: '',
            username: '',
            price: '1780.00',
            decimal: [],
        };
    },
    mounted() {
        this.getInfoShare();
    },
    methods: {
        getInfoShare() {
            this.$http
                .post('/info/share', { password: this.password })
                .then(res => {
                    const { success, data, msg } = res.data;
                    if (success) {
                        this.avatarUrl = res.data.data.user.avatarImg;
                        this.username = res.data.data.user.name;
                        this.price = res.data.data.user.price;
                        this.decimal = this.price.toFixed(2).split('.');
                    }
                    // Notify({ type: success ? 'success' : 'warning', message: msg });
                    // success && this.$router.push('/share');
                })
                .catch(err => {});
        },
        // 点击查看详情
        checkDetail() {
            this.$router.push('/index');
            // this.$http
            //     .post('/chek/info', { info: '99999' })
            //     .then(res => {
            //         const { success, data, msg } = res.data;
            //         if (success) {
            //         }
            //         // Notify({ type: success ? 'success' : 'warning', message: msg });
            //         // success && this.$router.push('/share');
            //     })
            //     .catch(err => {});
        },
    },
};
</script>

<style lang="scss" scoped>
.share-page {
    background-image: url('@/assets/images/index/bg.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: 4rem 3rem;
    .inner-background {
        background-image: url('@/assets/images/index/bg_white.jpg');
        background-repeat: no-repeat;
        background-position: top;
        background-size: cover;
        // height: 100%;
        width: 100%;
        border-radius: 12px;
        .inner-box {
            padding: 12px;
            .avatar-name-row {
                display: flex;
                align-items: center;
                margin-bottom: 12px;
                .username {
                    font-size: 16px;
                    font-weight: bold;
                    margin-left: 12px;
                }
                .avatar {
                    margin-right: 8px;
                    border-radius: 50%;
                    width: 2.5rem;
                    height: 2.5rem;
                    object-fit: cover;
                }
            }
            .img_picture {
                width: 12rem;
                height: 12rem;
                background-color: #fafafa;
                padding: 12px 6px;
                margin: 4rem auto;
                .raduis {
                    border-radius: 50%;
                    border: 2rem solid #0f1217;

                    .picture {
                        width: 100%;
                        height: 100%;
                        border-radius: 50%;
                    }
                }
            }
            .bottom-box {
                margin-top: 3rem;
                padding: 0 12px;
                .price {
                    color: rgb(253, 140, 9);
                    font-size: 1.4rem;
                    span {
                        color: rgb(255, 82, 5);
                        font-size: 2rem;
                    }
                }
                .btn_share {
                    // margin-bottom: 1rem;
                }
            }
        }
    }

    .share-text {
        color: grey;
    }
}
</style>
